<template>
  <div class="carousel" :style="style">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        class="default"
        v-for="(item, index) in contentSetting.list"
        :key="index"
      >
        <img class="swiper_img" :src="item.imageUrl" alt="" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: {
    //组件的ID
    id: {
      type: String,
      required: true,
    },
    // 组件的样式
    styleSetting: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 组件的内容
    contentSetting: {
      type: Object,
      default: () => {
        return {
          list: [
            {
              imageUrl:
                "https://image-c.weimobwmc.com/saas-wxbiz/37e08e918c1e44bfb61aaf34cdc67935.png?imageView2/2/w/750/q/100/interlace/1",
              linkType: "page",
              link: "",
            },
            {
              imageUrl:
                "https://image-c.weimobwmc.com/saas-wxbiz/37e08e918c1e44bfb61aaf34cdc67935.png?imageView2/2/w/750/q/100/interlace/1",
              linkType: "page",
              link: "",
            },
          ],
        };
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    style: function () {
      if (this.styleSetting) {
        let styles = `
                    margin-top:${this.styleSetting.marginTop};
                    margin-bottom:${this.styleSetting.marginBottom}
                    border-radius:${this.styleSetting.boderRadius}`;
        return styles;
      }
    },
  },
  watch: {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.carousel {
  .default {
    color: #fff;
    font-size: 20px;
    // line-height: 150px;
    text-align: center;
    overflow: hidden;
  }
  .swiper_img {
    width: 100%;
    height: 100%;
  }
}
</style>